<template>
    <el-dialog :title="title" v-model="visible" width="480px" :close-on-click-modal="false" @close="emits('close')">
        <el-form ref="formRef"
                 :model="form"
                 :rules="formRules"
                 :label-width="120">
          
            <el-form-item label="部门名称:" prop="department_name">
                <el-input v-model="form.department_name" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="上级部门:" prop="parent_id">
                <el-tree-select v-model="form.parent_id" 
                                style="width:100%"
                                :disabled="state == 'edit'"
                                check-strictly
                                :data="departTree" 
                                :render-after-expand="false"
                                :props="{
                                    label:'department_name',
                                    value:'id',
                                    children:'child_list'
                                }"></el-tree-select>
            </el-form-item>
           
        </el-form>
        <div solt="footer" class="dialog-footer">
            <el-button @click="emits('close')">取 消</el-button>
            <el-button type="primary" @click="save(formRef)">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import {ref,reactive, watch, computed,defineEmits} from 'vue'
import { ElMessage } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router'

import { addDepart,editDepart } from 'services/setting'

import type {Depart} from '../../index'

const emits = defineEmits(['close', 'success'])

const route = useRoute()

const formRef = ref<FormInstance>()

const form = ref<Depart>({
    id:null,
    department_name:'',
    parent_id:null,
})

const formRules = reactive<FormRules>({
    department_name:[{required:true,message:'请输入部门名称'},{max:10,message:'最多只能10个文字'}],
})

const props = defineProps<{
    dialogVisible:boolean,
    detail?:Depart,
    state:string,
    departTree?:any[]
}>();

const visible = ref(false)

watch(() => props.dialogVisible, (val) => {
    visible.value = val
    console.log(props.state)
    if (visible.value === true) {
            
        form.value = props.detail || {
            id:null,
            department_name:'',
            parent_id:null,
        }
    }
},{
    immediate:true
})

const title = computed(() => {
    return props.state == 'add' ? '新增部门' : '编辑部门'
})

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (form.value.id) {
                editDepart(form.value).then((res:any) => {
                    ElMessage.success('操作成功')
                    emits('success')
                })
            } else {
                addDepart(form.value).then((res:any) => {
                    ElMessage.success('操作成功')
                    emits('success')
                })
            }
            
        } else {
            console.log('error submit', fields)
        }
    }) 
}


</script>